import React from 'react';
import '@/styles/Pop/Pop.less';

/**
 * 页面气泡生成与消失事件
 * 存在问题：
 * 1、消失动画无法实现
 * 2、移除首项泡泡逻辑会导致整个数组消失
*/
export default class Pop extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      popList: [],  //pop个数
      ccc: false
    }
  }
  componentDidMount(){
  }
  // 必须使用static！否则： Lifecycle method should be static: getDerivedStateFromProps
  static getDerivedStateFromProps(nextProps, prevState){
    return {
      popList: nextProps.popList
    }
  }
  onClick= () => {
    console.log('ccc',this.state.ccc);
    let c = this.state.ccc
    this.setState({
      ccc: !c
    })
  }
  render() {
    const {
      popList,
      ccc
    } = this.state
    console.log(ccc);
    return (
      <div>
        <div className={`heart ${ccc ? 'transition-opacity' : ''}`}>
          hhhhh
        </div>
        <button onClick={this.onClick}>click</button>
        {
          popList.length>0 ?
          popList.map((item, index) => {
            return(
              <div key={index} className="heart transition-opacity" style={{position: "absolute", top: `${item.popTop}px`, left:`${item.popLeft}px`, backgroundColor: item.heartBgColor }}></div>
            )
          })
          :
          ''
        }
      </div>
      
    )
  }
}